<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <!-- <link rel="stylesheet" href="./pugong.css" /> -->
    <script src="./index.full.js"></script>
    <script src="./websocket.js"></script>
    <!-- <script src="./AndroidUtil.js"></script> -->
    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1280) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
  </head>

  <body>
    <div id="app">
      <div class="container_box" v-if="showSelect">
        <div class="date_box">
          <div class="d_date">{{nowYear}} 年 {{nowMonth}} 月 {{nowDay}} 日</div>
          <div class="d_time">{{nowHour}}:{{nowMin}}</div>
        </div>
        <div class="con_box">
          <div class="name_box" style="text-align: center">{{ userName }}，欢迎您~~~</div>
          <div class="entrance_box" style="display: flex; justify-content: space-between">
            <div class="ent_item" @click="onSelect('education')">
              <img class="e_img" src="./assets/image/indexIcon1.png" alt="" />
              <div class="e_txt">教育培训</div>
              <div class="e_desc">Education Training</div>
            </div>
            <div class="ent_item ent_item_col" @click="onSelect('wage')">
              <img class="e_img" src="./assets/image/indexIcon2.png" alt="" />
              <div class="e_txt">工资档案</div>
              <div class="e_desc">Salary File</div>
            </div>
          </div>
          <!-- <el-row v-if="showSelect">
            <el-col :sm="12" :lg="12">
              <el-result icon="success" title="Success Tip" sub-title="教育培训">
                <template #extra>
                  <el-button type="primary" @click="onSelect('education')">提交</el-button>
                </template>
              </el-result>
            </el-col>

            <el-col :sm="12" :lg="12">
              <el-result icon="info" title="Info Tip">
                <template #sub-title>
                  <p>工资档案填写</p>
                </template>
                <template #extra>
                  <el-button type="primary" @click="onSelect('wage')">提交</el-button>
                </template>
              </el-result>
            </el-col>
          </el-row> -->
        </div>
      </div>

      <template v-if="showIframe">
        <iframe width="120%" height="1000px" id="iframeRef" ref="iframeRef" src="" v-if="showIframe"></iframe>

        <!--        <iframe width="120%" height="1000px"  class="iframeRef" ref="iframeRef" src="./01——入场一人一档资料（普工）.html"-->
        <!--                v-if="jobType == '普工'"></iframe>-->
        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./02——入场一人一档资料（挖机工）.html"-->
        <!--                v-if="jobType == '挖机工'"></iframe>-->
        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef"-->
        <!--                src="./03——入场一人一档资料（装载机工).html"-->
        <!--                v-if="jobType == '装载机工'"></iframe>-->
        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef"-->
        <!--                src="./04——入场一人一档资料（管理人员).html"-->
        <!--                v-if="jobType == '管理人员'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./05——入场一人一档资料（电工).html"-->
        <!--                v-if="jobType == '电工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./06——入场一人一档资料（起重工).html"-->
        <!--                v-if="jobType == '起重工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef"-->
        <!--                src="./07——入场一人一档资料（模板工) .html"-->
        <!--                v-if="jobType == '模板工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./08——入场一人一档资料（木工).html"-->
        <!--                v-if="jobType == '木工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./09——入场一人一档资料（支护工).html"-->
        <!--                v-if="jobType == '支护工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./10——入场一人一档资料（驾驶员）.html"-->
        <!--                v-if="jobType == '驾驶员'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./11——入场一人一档资料（电焊工）.html"-->
        <!--                v-if="jobType == '电焊工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./12——入场一人一档资料（泥瓦工）.html"-->
        <!--                v-if="jobType == '泥瓦工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./13——入场一人一档资料（开挖工）.html"-->
        <!--                v-if="jobType == '开挖工'" ></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./14——入场一人一档资料（架子工）.html"-->
        <!--                v-if="jobType == '架子工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./15——入场一人一档资料（钢筋工）.html"-->
        <!--                v-if="jobType == '钢筋工'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./16——入场一人一档资料（厨师）.html"-->
        <!--                v-if="jobType == '厨师'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef"-->
        <!--                src="./17——入场一人一档资料（塔吊司机）.html"-->
        <!--                v-if="jobType == '塔吊司机'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./18——入场一人一档资料（仰拱）.html"-->
        <!--                v-if="jobType == '仰拱'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./19——入场一人一档资料（二衬）.html"-->
        <!--                v-if="jobType == '二衬'"></iframe>-->

        <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./20——入场一人一档资料（喷浆）.html"-->
        <!--                v-if="jobType == '喷浆'"></iframe>-->
      </template>
      <!--    <template v-if="showWage">-->

      <!--        <iframe width="120%" height="1000px" class="iframeRef" ref="iframeRef" src="./工资.html"-->
      <!--                v-if="jobType == 'wage'"></iframe>-->
      <!--    </template>-->
    </div>
    <script type="module">
      const { createApp, reactive, ref, toRefs, watch, nextTick, onMounted } = Vue;
      const vue3Composition = {
        setup: function () {
          // onMounted(() => {
          //     setTimeout(()=>{
          //     onSelect('education')

          //     },1000)
          // })
          const showSelect = ref(true); //是否显示选择
          const showIframe = ref(false); //是否显示选择工资
          const nowYear = ref();
          const nowMonth = ref();
          const nowDay = ref();
          const nowHour = ref();
          const nowMin = ref();

          const now = new Date();

          // 提取时间组件并补零
          nowYear.value = now.getFullYear();
          nowMonth.value = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始
          nowDay.value = String(now.getDate()).padStart(2, "0");
          nowHour.value = String(now.getHours()).padStart(2, "0");
          nowMin.value = String(now.getMinutes()).padStart(2, "0");

          const userName = ref("");
          // 跟后端协商，需要什么参数数据给后台
          const obj = ref({
            personCard: "",
            devSubID: "sbid",
            type: "data",
            dataJson: {},
          });

          const onSelect = (type) => {
            showSelect.value = false;
            showIframe.value = true;
            if (type == "education") {
              // obj.value.type = "data-j";
              obj.value.type = "data-d";
              getServer(obj.value);
            } else if (type == "wage") {
              obj.value.type = "data-k";
              getServer(obj.value);
            }
          };

          const jobType = ref("");
          const dataJson = ref();

          window.childListener = function (result) {
            if (result.data == "TaskSignFinger") {
              AndroidUtil.runTask("TaskSignFinger", null);
            } else if (result.data == "TaskSign") {
              AndroidUtil.runTask("TaskSign", null);
            } else if (result.data == "TaskHCameraAuto") {
              AndroidUtil.runTask(
                "TaskHCamera",
                JSON.stringify({
                  autoCut: true,
                })
              );
            } else if (isJSON(result.data)) {
              // showSelect.value = true;
              // showIframe.value = false;
              // jobType.value = "";
              let saveData = JSON.parse(result.data);
              obj.value.type = saveData.type;
              getServer(result.data);
            } else {
              AndroidUtil.runTask(result.data, null);
            }
          };

          function isJSON(str) {
            if (typeof str == "string") {
              try {
                var obj = JSON.parse(str);
                if (typeof obj == "object" && obj) {
                  return true;
                } else {
                  return false;
                }
              } catch (e) {
                console.log("error：" + str + "!!!" + e);
                return false;
              }
            }
            console.log("It is not a string!");
          }

          let iframeRef = ref(null); // 和iframe标签的ref绑定

          let iframeSrc = {
            普工: "./01——入场一人一档资料（普工）.html",
            挖机工: "./02——入场一人一档资料（挖机工）.html",
            装载机工: "./03——入场一人一档资料（装载机工).html",
            管理人员: "./04——入场一人一档资料（管理人员).html",
            电工: "./05——入场一人一档资料（电工).html",
            起重工: "./06——入场一人一档资料（起重工).html",
            模板工: "./07——入场一人一档资料（模板工) .html",
            木工: "./16——入场一人一档资料（厨师）.html",
            // '木工': './08——入场一人一档资料（木工).html',
            支护工: "./09——入场一人一档资料（支护工).html",
            驾驶员: "./10——入场一人一档资料（驾驶员）.html",
            电焊工: "./11——入场一人一档资料（电焊工）.html",
            泥瓦工: "./12——入场一人一档资料（泥瓦工）.html",
            开挖工: "./13——入场一人一档资料（开挖工）.html",
            架子工: "./14——入场一人一档资料（架子工）.html",
            钢筋工: "./15——入场一人一档资料（钢筋工）.html",
            厨师: "./16——入场一人一档资料（厨师）.html",
            塔吊司机: "./17——入场一人一档资料（塔吊司机）.html",
            仰拱: "./18——入场一人一档资料（仰拱）.html",
            二衬: "./19——入场一人一档资料（二衬）.html",
            喷浆: "./20——入场一人一档资料（喷浆）.html",
            wage: "./工资.html",
          };

          //创建XMLHttpRequest 对象
          //参数：无
          //返回值：XMLHttpRequest 对象
          function createXHR() {
            var XHR = [
              //兼容不同浏览器和版本得创建函数数组
              function () {
                return new XMLHttpRequest();
              },
              function () {
                return new ActiveXObject("Msxml2.XMLHTTP");
              },
              function () {
                return new ActiveXObject("Msxml3.XMLHTTP");
              },
              function () {
                return new ActiveXObject("Microsoft.XMLHTTP");
              },
            ];
            var xhr = null;
            //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
            for (var i = 0; i < XHR.length; i++) {
              try {
                xhr = XHR[i]();
              } catch (e) {
                continue; //如果发生异常，则继续下一个函数调用
              }
              break; //如果成功，则中止循环
            }
            return xhr; //返回对象实例
          }

          const getServer = (data) => {
            var xhr = createXHR();

            // 配置HTTP请求
            // 第一个参数是HTTP请求方法，第二个参数是请求的URL
            // xhr.open("POST", "http://192.168.3.28:2020/signed/getEducationData");
            xhr.open("POST", "http://101.132.154.10:2020/signed/getEducationData");

            // 设置请求完成的回调函数
            xhr.onload = function () {
              if (xhr.status === 200) {
                // 请求成功
                // console.log(xhr.responseText); // 处理返回的数据
                let data = JSON.parse(xhr.responseText);
                dataJson.value = data;
                if (obj.value.type == "data-j") {
                  // jobType.value = data.wordEducate.workType;
                  // if (!jobType.value) {
                  //   alert("未查找到对应工种");
                  //   showSelect.value = true;
                  //   showIframe.value = false;
                  // }
                } else if (obj.value.type == "data-g") {
                  jobType.value = "wage";
                }
                if (obj.value.type == "data-d" || obj.value.type == "data-k") {
                  const iframe = document.getElementById("iframeRef");

                  if (obj.value.type == "data-d") {
                    iframe.src = "./word.html";
                  } else {
                    iframe.src = "./工资.html";
                  }

                  // iframe.src = './word.html'
                  // iframe.src = iframeSrc[jobType.value]
                  console.log(iframe, "if");
                  if (iframe.attachEvent) {
                    iframe.attachEvent("onload", function () {
                      //以下操作必须在iframe加载完后才可进行
                      console.log("iframe加载完成");
                    });
                  } else {
                    iframe.onload = function () {
                      //以下操作必须在iframe加载完后才可进行
                      iframe.contentWindow.handleMessage({
                        data: JSON.stringify({
                          data: data,
                          type: 1,
                        }),
                      });
                    };
                  }
                } else if (obj.value.type == "form-d" || obj.value.type == "form-k") {
                  const iframe = document.getElementById("iframeRef");
                  iframe.contentWindow.sure();
                  if (dataJson.value?.code == 201) {
                    return alert(dataJson.value.msg);
                  }
                  console.log(xhr, "提交了", dataJson.value);
                  showSelect.value = true;
                  showIframe.value = false;
                  jobType.value = "";
                  testIDCard();
                  obj.value.personCard = "";
                  userName.value = "";
                }
              } else {
                // 请求失败
                console.error("请求失败，状态码：" + xhr.status);
              }
            };

            xhr.setRequestHeader("content-type", "application/json");
            xhr.send(JSON.stringify(data));
          };
          let isIdCard = true;

          function testIDCard() {
            // class {
            //      boolean readFingerPrint = false;     //是否读取指纹特征数据
            //      boolean photo = false;               //是否返回身份证人像照片
            //      int cardImageFront = 0;              //生成身份证人像面的图片,   0 - 不生成    else   身份证图片宽度(像素)  --原图是1012x644的分辨率
            //      int cardImageBack = 0;               //生成身份证国徽面的图片,   0 - 不生成    else   身份证图片宽度(像素)  --原图是1012x644的分辨率
            //      int cardImageVertical = 0;           //生成身份证竖向合成图，   0 - 不生成    else   身份证图片宽度(单张像素)
            //      int cardImageHorizontal = 0;         //生成身份证横向合成图，   0 - 不生成    else   身份证图片宽度(单张像素）
            //      int cardImageMergeGap = 30;          //合成图的图片间隙(像素)
            // }
            isIdCard = false;
            AndroidUtil.runTask(
              "TaskIDCard",
              JSON.stringify({
                photo: true,
                readFingerPrint: true,
                cardImageFront: 400,
              })
            );
          }

          testIDCard();

          /**


             高拍仪拍照的回调数据:
             {"task":"TaskHCamera","code":0,"retData":{"picture":"VBORw0KGgoAAAANSUhEUgAABkAAAA... 这里是Base64编码的高拍仪照片"},"info":"操作成功"}

             身份证信息的回调数据:
             {"task":"TaskIDCard","code":0,"retData":{"effectDate":"2017-10-15","fingerPrintBase64":"wEREgELXgAAAAAAAAAAAAAAAB0Bmo...
             这里是Base64编码的身份证指纹数据",
             "address":"四川省乐山市市中区宝兴2组72号","issue":"乐山市公安局市中分局","nation":"汉","sex":"男",
             "type":1,"birthDate":"1987-11-04","idno":"511102198711045310","sexCode":"1",
             "name":"胡淞","photoBase64":"9j/4AAQSkZJRgABAQAAAQABAAD/4g... 这里是Base64编码的身份证人像图",
             "expireDate":"2038-10-15","imageFrontBase64":"VBORw0KGgoAAAANSUhEUgAAAZAAAA...
             这里是Base64编码的身份证正面合成图","nationCode":"01"},"info":"操作成功"}

             指纹的回调数据：
             {"task":"TaskFinger","code":0,"retData":{"fingerPicBase64":"VBORw0KGgoAAAANSUhEUgAAAQAAAA...这里是Base64编码的指纹图片"},"info":"操作成功"}

             签名的回调数据：
             {"task":"TaskSign","code":0,"retData":{"signedPicBase64":"VBORw0KGgoAAAANSUhEUgAAAaUAAA... 这里是Base64编码的签名图片"},"info":"操作成功"}

             获取程序信息的返回：
             {"appVersion":"0.9","appIssueDate":"2024-05-13"}

             * **/
          let androidCallBackData;

          window.AndroidCallBack = function (rjson) {
            if (rjson.retData != null) {
              //处理base64位的图片存放到设备
              let image = null;
              if (rjson.retData.fingerPicBase64 != null) {
                // showImg("png", rjson.retData.fingerPicBase64);
                image = rjson.retData.fingerPicBase64;
                rjson.retData.fingerPicBase64 = rjson.retData.fingerPicBase64.substring(1, 30) + "...这里是Base64编码的指纹图片";
              }
              if (rjson.retData.signedPicBase64 != null) {
                //showImg("png", rjson.retData.signedPicBase64);
                image = rjson.retData.signedPicBase64;
                rjson.retData.signedPicBase64 = rjson.retData.signedPicBase64.substring(1, 30) + "... 这里是Base64编码的签名图片";
              }
              if (rjson.retData.photoBase64 != null) {
                // showImg("jpeg", rjson.retData.photoBase64);
                image = rjson.retData.photoBase64;
                rjson.retData.photoBase64 = rjson.retData.photoBase64.substring(1, 30) + "... 这里是Base64编码的身份证人像图";
              }
              if (rjson.retData.imageFrontBase64 != null) {
                // showImg("png", rjson.retData.imageFrontBase64);
                image = rjson.retData.imageFrontBase64;
                rjson.retData.imageFrontBase64 = rjson.retData.imageFrontBase64.substring(1, 30) + "... 这里是Base64编码的身份证正面合成图";
              }
              if (rjson.retData.imageBackBase64 != null) {
                //  showImg("png", rjson.retData.imageBackBase64);
                image = rjson.retData.imageBackBase64;
                rjson.retData.imageBackBase64 = rjson.retData.imageBackBase64.substring(1, 30) + "... 这里是Base64编码的身份证背面合成图";
              }
              if (rjson.retData.imageVerticalBase64 != null) {
                // showImg("png", rjson.retData.imageVerticalBase64);
                image = rjson.retData.imageVerticalBase64;
                rjson.retData.imageVerticalBase64 = rjson.retData.imageVerticalBase64.substring(1, 30) + "... 这里是Base64编码的身份证竖向合成图";
              }
              if (rjson.retData.imageHorizontalBase64 != null) {
                //showImg("png", rjson.retData.imageHorizontalBase64);
                image = rjson.retData.imageHorizontalBase64;
                rjson.retData.imageHorizontalBase64 = rjson.retData.imageHorizontalBase64.substring(1, 30) + "... 这里是Base64编码的身份证横向合成图";
              }
              if (rjson.retData.fingerPrintBase64 != null) {
                rjson.retData.fingerPrintBase64 = rjson.retData.fingerPrintBase64.substring(1, 30) + "... 这里是Base64编码的身份证指纹数据";
                obj.value.personCard = rjson.retData.idno;
                userName.value = rjson.retData.name;
              }
              if (rjson.retData.picture != null) {
                //showImg("png", rjson.retData.picture);
                image = rjson.retData.picture;
                rjson.retData.picture = rjson.retData.picture.substring(1, 30) + "... 这里是Base64编码的高拍仪照片";
              }

              if (isIdCard) {
                nextTick(() => {
                  setTimeout(function () {
                    document.getElementById("iframeRef").contentWindow.handleMessage({
                      data: JSON.stringify({
                        data: image,
                        type: 2,
                      }),
                    });
                  }, 1000);
                });
              } else {
                isIdCard = true;
              }
            }
            // console.log(JSON.stringify(rjson));
            // showMsg(JSON.stringify(rjson));
          };

          let websock = null;

          return {
            showIframe,
            iframeRef,
            jobType,
            onSelect,
            showSelect,
            AndroidCallBack,
            userName,
            nowYear,
            nowMonth,
            nowDay,
            nowHour,
            nowMin,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
  <style>
    * {
      margin: 0;
    }

    .container_box {
      width: 100%;
      height: 100vh;
      background: url("./assets/image/indexBg.png") no-repeat center;
      background-size: cover;
      overflow: hidden;
    }

    .date_box .d_date {
      font-size: 0.2rem;
      color: #fff;
      text-align: center;
      margin: 0.6rem 0rem 0rem 0;
    }

    .date_box .d_time {
      font-size: 0.8rem;
      color: #fff;
      text-align: center;
      font-weight: bold;
    }

    .con_box {
      width: 70%;
      margin: 0 auto;
    }

    .name_box {
      font-size: 0.3rem;
      color: #fff;
      margin-top: 0.2rem;
    }

    .entrance_box {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
    }

    .ent_item {
      width: 45%;
      height: 2.7rem;
      background-color: #84dfe1;
      border-radius: 0.1rem;
      box-sizing: border-box;
      padding: 0.2rem;
      cursor: pointer;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .ent_item_col {
      background-color: #01a7f0;
    }

    .ent_item .e_img {
      width: 1rem;
      height: 1rem;
      margin-bottom: 0.1rem;
    }

    .ent_item .e_txt {
      color: #fff;
      font-size: 0.4rem;
    }

    .ent_item .e_desc {
      color: #fff;
      font-size: 0.3rem;
    }
  </style>
</html>
